<template>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <div class="adddict">
                <el-form-item v-if="type === 'edit'" label="字典值">
                    <mt-input v-model="form.dictTypeId" disabled></mt-input>
                </el-form-item>
                <el-form-item prop="dictTypeName" label="目录名称">
                    <mt-input v-model="form.dictTypeName"></mt-input>
                </el-form-item>
            </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <mt-button type="submain" @click="handleClose">取消</mt-button>
            <mt-button @click="addNewType">{{ btnName }}</mt-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "DictTypeDialog",

    data () {
        return {
            form: {
                id: "",
                dictName: "",
                dictCode: ""
            },
            rules: {
                dictName: [{ required: true, message: "请输入目录名称", trigger: "change" }]
            },
            type: "add", // 新建或编辑

            dialogVisible: false
        };
    },

    computed: {
        title () {
            return this.type === "add" ? "新增字典目录" : "修改字典目录";
        },
        btnName () {
            return this.type === "add" ? "新增" : "修改";
        }
    },

    created () {},

    mounted () {},

    methods: {
        start (add = true, data) {
            this.type = add ? "add" : "edit";
            if (!add) {
                this._.assign(this.form, data);
            }
            this.dialogVisible = true;
        },

        /* 新增&编辑 */
        async addNewType () {
            let valid = true;
            this.$refs["form"].validate((v) => {
                if (!v) valid = false;
            });
            if (!valid) return;

            if (this.type === "add") {
                const params = { dictTypeName: this.form.dictTypeName };
                await this.$request.post(this.API.ADD_DICT_CATALOG, params).then(res => {
                    if (res.success) {
                        this.$mtMessage({ type: "success", message: "新增成功!" });
                        this.$emit("refresh");
                        this.handleClose();
                    }
                });
            }
            else if (this.type === "edit") {
                const params = {
                    dictTypeId: this.form.dictTypeId,
                    dictTypeName: this.form.dictTypeName
                };
                await this.$request.post(this.API.UPDATE_DICT_CATALOG, params).then(res => {
                    if (res.success) {
                        this.$mtMessage({ type: "success", message: "修改成功!" });
                        this.$emit("refresh");
                        this.handleClose();
                    }
                });
            }
        },

        /* 弹窗关闭 */
        handleClose () {
            this.$refs["form"].resetFields();
            this.dialogVisible = false;
        }
    }
}
</script>

<style lang="scss">
</style>